---
title: Custom Canvas Rendering
---

Univer provides an extension mechanism that allows you to customize the rendering of content in a spreadsheet. This mechanism can be used to implement custom row headers, column headers, and middle content area rendering.

<PlaygroundFrame lang="en-US" slug="sheets/custom-canvas" clickToShow />

The rendering of some Univer elements, such as borders and backgrounds, is accomplished using an extension mechanism. Facade has built-in common extension registration API:

- Middle content area: [`registerSheetMainExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetmainextension)
- Row header: [`registerSheetRowHeaderExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetrowheaderextension)
- Column header: [`registerSheetColumnHeaderExtension`](https://reference.univer.ai/zh-CN/classes/FUniver#registersheetcolumnheaderextension)

By inheriting `SheetExtension` and providing a unique key, zIndex, and drawing logic, a sheet rendering extension can be implemented as follows:

```typescript
class RowHeaderCustomExtension extends SheetExtension {
  override uKey = 'RowHeaderCustomExtension'

  // Must be greater than 10
  override get zIndex() {
    return 11
  }

  override draw(ctx: UniverRenderingContext, parentScale: IScale, spreadsheetSkeleton: SpreadsheetSkeleton) {
    // ... primary rendering logic
  }
}

SheetRowHeaderExtensionRegistry.add(new RowHeaderCustomExtension())
```

<Callout>
  The zIndex for row and column header extensions must be greater than 10, and for middle content area extensions, it must be greater than 50, otherwise, they will be overridden.
</Callout>

Then register to the specified unitId:

```typescript
univerAPI.registerSheetRowHeaderExtension(unitId, new RowHeaderCustomExtension())
```

Note that `UniverRenderingContext` is essentially [CanvasRenderingContext2D](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D), and you can draw according to your needs (e.g., clear the original row and column headers).
